<template>
  <div>
    <table>
      <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(form, index) in formList" :key="form.id">
        <td><input type="text" v-model="form.firstName" @keydown.enter="nextTick(index, 'firstName')" :id="'firstName' + index"></td>
        <td><input type="text" v-model="form.lastName" @keydown.enter="nextTick(index, 'lastName')" :id="'lastName' + index"></td>
        <td><input type="text" v-model="form.email" @keydown.enter="nextTick(index, 'email')" :id="'email' + index"></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  components: {
  },
  setup () {
    const formList = ref([
      {
        firstName: '',
        lastName: '',
        email: ''
      }
    ])
    const nextTick = (index, name) => {
      let nextDom = false
      switch (name) {
        case 'firstName':
          nextDom = document.getElementById('lastName' + index)
          break
        case 'lastName':
          nextDom = document.getElementById('email' + index)
          break;
        case 'email':
          if (index === formList.value.length-1) {
            formList.value.push({
              firstName: '',
              lastName: '',
              email: ''
            })
          }
          setTimeout(() => {
            nextDom = document.getElementById('firstName' + String(index + 1))
            nextDom.focus()
          },1)
          break
        default:
          nextDom = false
      }
      if (nextDom) {
        nextDom.focus()
      }
    }
    return {
      formList,
      nextTick
    }
  }
}
</script>

<style>
</style>
